<template>
  <view class="page-container">
    <HeaderBar
        class="header-bar"
        ref="headerBarRef"
        title="阿坝优选"
        navBarBgc="linear-gradient(0deg, rgba(199,215,195,1) 0%, rgba(188,207,187,1) 20%, rgba(160,190,167,1) 100%)"
    ></HeaderBar>
    <view class="content-container">
      <view class="swiper-container">
        <wd-swiper
            :list="swiperList"
            autoplay
            value-key="imgUrl"
            height="136"
        ></wd-swiper>
      </view>
      <image
          class="title-img"
          src="http://img.jowong.com/aba/2025-04-11/组 2@2x_1744333893665.png"
      ></image>
      <scroll-view
          :scroll-x="true"
          class="activity-container"
      >
        <image
            v-for="(item,index) in activityImgList"
            :key="index"
            :src="item.imgUrl"
            :lazy-load="true"
            class="activity-img"
        ></image>
      </scroll-view>
    </view>
    <view class="product-container flex-1">
      <scoll-view
          :scroll-x="true"
          class="category-container"
      >
        <view
            v-for="(item,index) in categoryTypeList"
            :key="index"
            :class="['category-item',item.code === choiceCategoryType ? 'choice-category-item' : '']"
            @click="selectCategoryType(item)"
        >
          {{item.name}}
        </view>
      </scoll-view>
      <view class="product-list-container">
        <ProductList
          :groupProductList="groupProductList"
          @navPage="NavProductDetail"
        ></ProductList>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {onMounted,ref} from "vue";
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import ProductList from "@/specialtySubPack/components/productList/index.vue";
  import {useMixin} from "@/hook/useMixin";
  import {specialtyProductList} from "@/api/specialty";
  import {commonWordList} from "@/api/system";
  const {dynamicGrouping} = useMixin();

  const headerBarRef = ref("");
  const swiperList = ref([{
    imgUrl: "https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
  }])
  const activityImgList = ref([
    {imgUrl:"http://img.jowong.com/aba/2025-04-11/图层 543_1744335599576.png"},
    {imgUrl:"http://img.jowong.com/aba/2025-04-11/图层 640@2x_1744335857838.png"},
  ]);
  const categoryTypeList = ref([]);
  const choiceCategoryType = ref("");
  const productList = ref([]);
  const groupProductList = ref([]);

  const NavProductDetail = (event) => {
    let {id} = event;
    uni.navigateTo({
      url: `/specialtySubPack/pages/specialtyProductDetail/index?productId=${id}`
    })
  };
  
  // 获取类型
  const queryCommonWordList = async () => {
  	await commonWordList({keys:"MALL_PRODUCT_CATEGARY"}).then(res => { 
  		categoryTypeList.value = res.result.MALL_PRODUCT_CATEGARY;
		categoryTypeList.value.unshift(
			{id: "",name: "全部"},
		);
  	}); 
  }; 
  const query = {
	  
  }
  const querySpecialtyProductList = async () => {
    await specialtyProductList({
	  pageNo: 1,
	  pageSize: 20,
	  tagCode: choiceCategoryType.value
    }).then(res => {
      productList.value = res.result;
      groupProductList.value = dynamicGrouping(productList.value,2);
      console.log(res,"res");
    })
  };
  
  // 类型切换
  const selectCategoryType = async (val) => {
	  choiceCategoryType.value = val.code;
	  querySpecialtyProductList();
	  
  }


  onReachBottom(() => {
    console.log("onReachBottom");
  });
  onShow(() => {
	  queryCommonWordList();
    querySpecialtyProductList();
  });
</script>

<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: column;
    min-height:100vh;
    .content-container {
      background: linear-gradient(180deg, rgba(197,214,193,1) 0%, rgba(228,233,216,1) 20%, rgba(238,240,223,1) 100%);
      .swiper-container {
        padding:30rpx 28rpx;
      }
      .title-img {
        padding: 0 28rpx 28rpx 28rpx;
        width: 229rpx;
        height: 45rpx;
      }
      .activity-container {
        box-sizing: border-box;
        height: 200.5rpx;
        width: 100%;
        padding-left: 28rpx;
        margin-bottom: 54.5rpx;
        white-space: nowrap;
        .activity-img {
          height: 100%;
          width: 439.5rpx;
          border-radius: 10rpx;
          margin-right: 19.5rpx;
        }
      }
    }
    .product-container {
      padding: 55.5rpx 27.5rpx 27.5rpx 27.5rpx;
      min-height: 64rpx;
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,247,238,.5) 10%, rgba(238,240,223,1) 100%);
      .category-container {
        width: 100%;
        height: 100%;
        white-space: nowrap;
        .category-item {
          display: inline-block;
          margin-right: 20rpx;
          font-size: 33.5rpx;
          padding: 16.5rpx 75rpx;
          border-radius: 7rpx;
          color: #2B2B24;
          background-color: #eef0df;
        }
        .choice-category-item {
          font-weight: bold;
          color: #1B9C61;
        }
      }
      .product-list-container {
        margin-top: 27.5rpx;
      }
    }
  }
</style>
